import React, { useEffect } from 'react'
import { Select } from 'antd';
import { useDispatch, useSelector } from 'react-redux'
import { getChannelList } from '@/store/actions/article'

// 注意：必须要接收到的props传递给Select组件 
export default function Channel(props) {
  const dispatch = useDispatch()
  const channelList = useSelector(state => state.article.channels)
  useEffect(() => {
    // 获取频道数据
    dispatch(getChannelList())
  }, [dispatch])
  return (
    <Select
      placeholder="请选择频道"
      style={{ width: 200 }}
      allowClear
      {...props}>
      {channelList.map(item => (
        <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
      ))}
    </Select>
  )
}
